<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <span class="flex items-center">
        <a-button class="mr-4" @click="$router.push('/project/add')" type="primary">
          <template #icon>
            <PlusOutlined />
          </template>
          添加项目</a-button
        >
        <a-input v-model:value="keyword" placeholder="请输入关键字" class="ml-4" />
        <a-button class="" type="primary" @click="getProjects"> 查询</a-button>
      </span>
    </div>

    <div class="bg-white mt-2 p-2">
      <div class="grid grid-cols-4 gap-4">
        <div
          class="cursor-pointer hover:shadow border p-2"
          v-for="item in projects"
          :key="item.id"
          @click="$router.push('/project/details/' + item.id)"
        >
          <img :src="item.img" class="w-full" />

          <div class="text-lg py-2">{{ item.name }}</div>

          <div class="flex justify-between py-2">
            <span class="grow">
              <a-button
                v-if="can('isenSorIntegrate')"
                type="primary"
                @click.stop="$router.push('/project/topology/' + item.id)"
                >传感器集成</a-button
              >
            </span>
            <span>
              <a-button
                v-if="can('projectEdit')"
                type=""
                @click.stop="$router.push('/project/edit/' + item.id)"
                >编辑</a-button
              >
              <a-button
                v-if="can('projectDelete')"
                type="danger"
                class="ml-2"
                @click.stop="onDelete(item.id)"
                >删除</a-button
              >
            </span>
          </div>
        </div>
      </div>
      <div class="pt-6 pb-4 flex justify-end">
        <a-pagination
          v-model:current="pageIndex"
          v-model:page-size="pageSize"
          :total="total"
          :show-total="(total) => `共 ${total} 条数据`"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, createVNode } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { PlusOutlined } from '@ant-design/icons-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { defHttp } from '/@/utils/http/axios';
import { usePermission } from '/@/hooks/web/usePermission';

interface Project {
  id: number;
  name: string;
  img: string;
}

export default defineComponent({
  components: { LayoutBreadcrumb, PlusOutlined },
  setup() {
    const pageIndex = ref<number>(1);
    const pageSize = ref<number>(8);
    const total = ref<number>(0);
    const keyword = ref('');
    const { can } = usePermission();

    const projects = ref<[Project]>();

    function onDelete(id) {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode('div', { style: 'color:black;' }, '确定删除？'),
        onOk: () => {
          defHttp.post({ url: '/project/delete', params: { id } }).then((res) => {
            message.success('删除成功');
            getProjects();
          });
        },
      });
    }

    function getProjects() {
      defHttp
        .get({
          url: '/project/search',
          params: { pageIndex: pageIndex.value, pageSize: pageSize.value, keyword: keyword.value },
        })
        .then((res) => {
          projects.value = res.data.pageList.map((item) => {
            item.img = 'http://47.92.241.95:8800/images/mode/bridge.png';
            return item;
          });
          total.value = res.data.total;
        });
    }

    getProjects();

    return {
      projects,
      pageIndex,
      pageSize,
      total,
      onDelete,
      getProjects,
      keyword,
      can,
    };
  },
});
</script>
